<template>
  <div>
    <view class="flex flex-col gap-4 px-4 pt-3">
      <view class="flex gap-4 items-center">
        <view class="w-[1.9rem] h-[1.9rem] overflow-hidden rounded-full">
          <image src="/static/13154543076.png" mode="scaleToFill" class="size-full" />
        </view>
        <view class="text-[1.125rem] text-[#382B2B] flex-none font-bold">峨眉派</view>
        <view class="rounded-full bg-[#FFFFFF] p-1 flex-1 flex items-center justify-between gap-4 pl-3">
          <input placeholder="请输入关键字" class="text-[13px] text-[#8B88AB] flex-1 h-full" v-model="state.keyword" />

          <!-- <view v-if="state.keyword" class="clear-btn flex justify-center items-center w-4 h-4 bg-gray-200 rounded-full" @click="clearKeyword">
            <view class="text-[12px] text-gray-500">×</view>
          </view> -->

          <view class="rounded-full bg-[#0788C8] h-full px-4 py-1" @click="search">
            <view class="text-[1rem] text-[#FFFFFF]"> 搜索</view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup>
  const state = ref({
    keyword: '',
  });
  function search() {
    // if (!state.value.keyword) {
    //   uni.showToast({
    //     title: '请输入搜索关键词',
    //     icon: 'none',
    //   });
    //   return;
    // }
    // uni.navigateTo({
    //   url: '/pages/yy/mall?keyword=' + state.value.keyword,
    // });
    uni.$emit('search', state.value.keyword);
  }

  function clearKeyword() {
    state.value.keyword = '';
  }

  function handleChange(e) {
    console.log('e==> ', e);
  }
</script>

<style lang="scss" scoped></style>
